<template>
  <u-popup
    :show="show"
    mode="bottom"
    @close="close"
    closeOnClickOverlay
    :safeAreaInsetBottom="true"
  >
    <slot>
      <view class="dialog">
        <view class="fenge"></view>
        <view class="row">
          <text class="left">预订单价</text>
          <text class="right">{{ item.unitPrice }}/{{ item.unitName }}</text>
        </view>
        <view class="row1">
          <text class="left">预订数量</text>
          <view class="number-box">
            <InitStep v-model:modelValue="item.qty"></InitStep>
          </view>
          <text class="unit">{{ item.unitName }}</text>
        </view>
        <view class="row1">
          <text class="left">备注</text>
          <view class="right" style="width: 200px">
            <up-input
              v-model="item.remark"
              inputAlign="right"
              placeholder="请输入备注信息"
              border="none"
              clearable
            ></up-input>
          </view>
        </view>
      </view>
    </slot>
    <view class="confirm">
      <u-button
        :loading="loading"
        shape="circle"
        @click="handleSubmit"
        color="linear-gradient(90deg, #F87523 0%, #FD1D20 100%)"
        text="确定"
      ></u-button>
    </view>
  </u-popup>
</template>
<!--通用 底部弹出 -->
<script setup>
import { ref } from "vue";
import InitStep from "@/components/initStep/initStep.vue";
const show = ref(false);
const item = ref({});
const loading = ref(false);
const open = (data) => {
  show.value = true;
  item.value = uni.$u.deepClone(data);
};
const emits = defineEmits(["submit"]);

const handleSubmit = () => {
  loading.value = true;
  emits("submit", item.value);
};
const close = () => {
  loading.value = false;
  item.value = {};
  show.value = false;
};
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.dialog {
  width: 750rpx;
  height: 440rpx;
  background-color: #fff;

  .fenge {
    position: relative;
    width: 750rpx;
    height: 20rpx;
    background-color: #fff;
  }
}

.row {
  position: relative;
  // padding-top:20rpx ;
  width: 750rpx;
  height: 90rpx;
  background: #ffffff;
  font-size: 28rpx;
  color: #434343;

  .left {
    position: absolute;
    left: 29rpx;
    top: 26rpx;
  }

  .right {
    position: absolute;
    right: 72rpx;
    top: 23rpx;
    // width: 200rpx;
    font-size: 28rpx;
    color: #a0a0a0;
  }
}

.row1 {
  position: relative;
  width: 750rpx;
  height: 90rpx;
  background: #ffffff;
  font-size: 28rpx;
  color: #434343;

  .left {
    position: absolute;
    left: 29rpx;
    top: 26rpx;
  }

  .right {
    position: absolute;
    right: 25rpx;
    top: 30rpx;
    width: 200rpx;
    font-size: 28rpx;
  }

  .select {
    position: absolute;
    left: 432rpx;
    top: 15rpx;
    width: 300rpx;
  }

  .datepicker {
    position: absolute;
    left: 432rpx;
    top: 15rpx;
    width: 300rpx;
  }

  .unit {
    position: absolute;
    left: 683rpx;
    top: 25rpx;
    color: #a0a0a0;
  }

  .number-box {
    position: absolute;
    left: 510rpx;
    top: 25rpx;
    width: 180rpx;
    height: 50rpx;
    // background: #F6F6F6;
  }
}

.confirm {
  margin-top: 20rpx;
  margin-left: 23rpx;
  margin-right: 16rpx;
}
</style>
